<template>
    <div class="main_footer">
        <div class="main_footer_1">
            <div class="main_footer_1_1">@五次方</div>
            <div class="main_footer_1_2">2022.10.11</div>
        </div>
        <div class="main_footer_2">
            <img class="main_footer_2_1_img" src="@/assets/img/footer/技术栈.png" alt="技术栈">
            <a-popover>
                <template #content>
                    <div>
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            图一
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            图二
                        </div>
                        <img style="width: 150px;height: 150px;margin-right: 20px;margin-top: 5px;"
                             src="@/assets/img/footer/技术栈1.png"
                             alt="qq">
                        <img style="width: 150px;height: 150px;margin-top: 5px;" src="@/assets/img/footer/技术栈2.png"
                             alt="微信">
                    </div>
                </template>
                <div class="main_footer_2_1" type="primary">项目技术栈</div>
            </a-popover>
            <img class="main_footer_2_2_img" src="@/assets/img/footer/产品反馈.png" alt="产品反馈">
            <div class="main_footer_2_2">
                产品反馈
            </div>
            <img class="main_footer_2_3_img" src="@/assets/img/footer/联系作者.png" alt="联系作者">
            <a-popover>
                <template #content>
                    <div>
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            QQ
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            微信
                        </div>
                        <img style="width: 150px;height: 150px;margin-right: 20px;margin-top: 5px;"
                             src="@/assets/img/footer/qq.png"
                             alt="qq">
                        <img style="width: 150px;height: 150px;margin-top: 5px;" src="@/assets/img/footer/微信.png"
                             alt="微信">
                    </div>
                </template>
                <div class="main_footer_2_3" type="primary">联系作者</div>
            </a-popover>
        </div>
    </div>
</template>

<script lang="ts" setup>
</script>

<style lang="less" scoped>
.main_footer {
  color: white;
  font-size: 15px;

  .main_footer_1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;

    .main_footer_1_1 {
      margin-right: 10px;
    }

    .main_footer_1_2 {
      margin-left: 10px;
    }
  }

  .main_footer_2 {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 10px;
    justify-content: center;
    align-items: center;

    .main_footer_2_1_img {
      width: 20px;
      height: 20px;
    }

    .main_footer_2_1 {
      margin-left: 2px;
      cursor: pointer;
    }

    .main_footer_2_2_img {
      margin-left: 50px;
      width: 20px;
      height: 20px;
    }

    .main_footer_2_2 {
      margin-left: 2px;
      cursor: pointer;
    }

    .main_footer_2_3_img {
      margin-left: 50px;
      width: 20px;
      height: 20px;
    }

    .main_footer_2_3 {
      margin-left: 2px;
      cursor: pointer;
    }
  }
}

</style>